<template>
  <div class="h100">
    <div class="commonTableSty h100">
      <s-table
        class="h100"
        ref="table"
        :columns="columns"
        :data="loadData"
        :pagination="false"
        :loading="loadingData"
        :scrollX="900"
        rowKey="id"
        size="default"
      >
        <template
          slot="partNumber"
          slot-scope="text"
        >
          <table-ellipsis :text="text"></table-ellipsis>
        </template>
        <template
          slot="ecuName"
          slot-scope="text"
        >
          <table-ellipsis :text="text"></table-ellipsis>
        </template>
        <template
          slot="softwareCode"
          slot-scope="text"
        >
          <table-ellipsis :text="text?text:'-'"></table-ellipsis>
        </template>
        <template
          slot="originalVersion"
          slot-scope="text"
        >
          <table-ellipsis :text="text"></table-ellipsis>
        </template>
        <template
          slot="targetVersion"
          slot-scope="text"
        >
          <table-ellipsis :text="text"></table-ellipsis>
        </template>
        <template
          slot="campaignName"
          slot-scope="text,record"
        >
          <table-ellipsis
            :text="text + (record.taskType === 10 ? '[' + $t('cycleTestTask') + ']':'') || '-'"
          ></table-ellipsis>
        </template>
        <template #updateState="text">
          <table-ellipsis :text="taskEcuUpdateDictCodeObj[text]"></table-ellipsis>
        </template>
        <template
          slot="action"
          slot-scope="text, record"
        >
          <a @click="showEcuUpdateDetail(record)">{{ $t('detail') }}</a>
        </template>
      </s-table>
    </div>
    <!-- 零件升级详情 -->
    <ecu-update-detail-dialog ref="ecuUpdateDetailDialogRef" height="70vh" width="80%" :query="dialogQuery">
    </ecu-update-detail-dialog>
  </div>
</template>
<script>
import TableEllipsis from '@/components/Ellipsis/TableEllipsis'
import EcuUpdateDetailDialog from '@/views/components/EcuUpdateDetail/dialog.vue'
import { mapState } from 'vuex'
import taskApi from '@/api/modules/task'
import { STable } from '@/components'
export default {
  components: {
    TableEllipsis,
    EcuUpdateDetailDialog,
    STable
  },
  props: {
    time: {
      type: Number,
      default: 7894102
    }
  },
  computed: {
    ...mapState({
      activeVehicleId: (state) => state.vehicle.vehicleDetail ? state.vehicle.vehicleDetail.id : '',
      queryParams: (state) => state.vehicle.vehicleEcuUpdateQuery
    }),
    taskEcuUpdateDictCodeObj () {
      return this.$store.getters.getDictCodeObj('taskEcuUpdateDictCode')
    }
  },
  data () {
    const columns = [
      {
        title: this.$t('partName'),
        dataIndex: 'ecuName',
        scopedSlots: { customRender: 'ecuName' },
        width: 140
      },
      {
        title: this.$t('partNumber'),
        dataIndex: 'ecuModuleId',
        scopedSlots: { customRender: 'partNumber' },
        width: 300
      },
      {
        title: this.$t('softwareCoding'),
        dataIndex: 'softwareCode',
        scopedSlots: { customRender: 'softwareCode' },
        width: 200
      },
      {
        title: this.$t('originalVersion'),
        dataIndex: 'sourceVersion',
        scopedSlots: { customRender: 'originalVersion' },
        width: 200
      },
      {
        title: this.$t('targetVersion'),
        dataIndex: 'targetVersion',
        scopedSlots: { customRender: 'targetVersion' },
        width: 200
      },
      {
        title: this.$t('updateState'),
        dataIndex: 'status',
        scopedSlots: { customRender: 'updateState' },
        width: 100,
        special: true
      },
      {
        title: this.$t('campaignName'),
        dataIndex: 'taskName',
        scopedSlots: { customRender: 'campaignName' },
        width: 260
      },
      {
        title: this.$t('operation'),
        dataIndex: 'operation',
        scopedSlots: { customRender: 'action' },
        width: 80,
        fixed: 'right'
      }
    ]
    return {
      columns,
      loadingData: false,
      tbData: [],
      dialogQuery: null
    }
  },
  watch: {
    time: {
      handler () {
        // this.getData()
      },
      immediate: true
    }
  },
  created () {
    this.getPageDictData()
  },
  methods: {

    // 查看车的某个零件所有升级情况
    showEcuUpdateDetail (record) {
      this.dialogQuery = {
        vehicleId: this.activeVehicleId,
        taskIds: record.taskId,
        ecuModuleId: record.ecuModuleId
      }
      this.$nextTick(() => {
        this.$refs.ecuUpdateDetailDialogRef.switchVisible(true)
      })
      // 跳转到升级监控详情


    },
    loadData (parameter) {
      const params = {
        ...this.queryParams,
        vehicleId: this.activeVehicleId
      }
      return new Promise((resolve, reject) => {
        const start = (parameter.pageNo - 1) * parameter.pageSize
        const end = start + parameter.pageSize
        if (this.tbData.length) {
          // 无需要重新api获取数据，直接本地分页
          resolve({
            code: 0,
            message: '',
            data: this.tbData.slice(start, end),
            totalCount: this.tbData.length,
            totalPage: Math.ceil(this.tbData.length / parameter.pageSize)
          })
          return
        }
        taskApi.getTaskVehicleEcuList(params).then(res => {
          this.tbData = res.data
          resolve({
            code: 0,
            message: '',
            data: res.data.slice(start, end),
            totalCount: res.data.length,
            totalPage: Math.ceil(res.data.length / parameter.pageSize),
            pageNo: 1
          })
        }).catch(err => {
          reject(err)
        })
      })
    },
    getData (isToFirstPage = true) {
      let obj = null
      if (isToFirstPage) {
        obj = { current: 1 }
      }
      this.tbData = []
      this.$refs.table && this.$refs.table.loadData(obj)
    },
    getPageDictData () {
      ['getTaskEcuUpdateDictCodeData'].forEach(method => {
        this.$store.dispatch(method)
      })
    }
  }
}
</script>
